<template>
  <ToolbarButton
    type="button"
    title="增大字体"
    icon="i-mdi-format-annotation-plus"
    @click="increaseFontSize"
  />
</template>

<script setup lang="ts">
import { inject, type Ref } from "vue";
import type { Editor } from "@tiptap/vue-3";
import ToolbarButton from "../../../button/index.vue";

defineOptions({
  name: "FontIncrease",
});

// 注入编辑器实例
const editor = inject<Ref<Editor>>("editor");

// 获取当前字体大小
const getCurrentFontSize = () => {
  if (!editor?.value) return "default";
  const fontSize = editor.value.getAttributes("textStyle").fontSize;
  return fontSize || "default";
};

// 解析字体大小值
const parseFontSize = (fontSize: string): number => {
  if (fontSize === "default") return 14; // 默认字体大小
  
  // 处理 pt 单位
  if (fontSize.includes("pt")) {
    return parseFloat(fontSize.replace("pt", ""));
  }
  
  // 处理 px 单位
  if (fontSize.includes("px")) {
    return parseFloat(fontSize.replace("px", ""));
  }
  
  return 14; // 默认值
};

// 格式化字体大小
const formatFontSize = (size: number): string => {
  return `${size}px`;
};

// 增大字体大小
const increaseFontSize = () => {
  if (!editor?.value) return;
  
  const currentSize = getCurrentFontSize();
  const currentValue = parseFontSize(currentSize);
  
  // 计算下一个更大的字体大小
  let nextSize = currentValue;
  
  // 定义字体大小递增规则
  if (currentValue < 10) nextSize = 10;
  else if (currentValue < 12) nextSize = 12;
  else if (currentValue < 14) nextSize = 14;
  else if (currentValue < 16) nextSize = 16;
  else if (currentValue < 18) nextSize = 18;
  else if (currentValue < 20) nextSize = 20;
  else if (currentValue < 22) nextSize = 22;
  else if (currentValue < 24) nextSize = 24;
  else if (currentValue < 26) nextSize = 26;
  else if (currentValue < 28) nextSize = 28;
  else if (currentValue < 36) nextSize = 36;
  else if (currentValue < 42) nextSize = 42;
  else if (currentValue < 48) nextSize = 48;
  else if (currentValue < 72) nextSize = 72;
  else nextSize = 72; // 最大字体大小
  
  // 如果已经是最大字体大小，则不进行任何操作
  if (nextSize === currentValue) return;
  
  const newFontSize = formatFontSize(nextSize);
  editor.value.chain().focus().setFontSize(newFontSize).run();
};
</script>
